<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
            <h2 id="jhi-employee-heading">Create or edit a Employee</h2>

            <div>
                <jhi-alert-error></jhi-alert-error>

                <div class="form-group" [hidden]="!editForm.get('id')!.value">
                    <label for="id">ID</label>
                    <input type="text" class="form-control" id="id" name="id" formControlName="id" readonly />
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_firstName" ngbTooltip="The firstname attribute.">First Name</label>
                    <input type="text" class="form-control" name="firstName" id="field_firstName"
                           formControlName="firstName"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_lastName">Last Name</label>
                    <input type="text" class="form-control" name="lastName" id="field_lastName"
                           formControlName="lastName"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_email">Email</label>
                    <input type="text" class="form-control" name="email" id="field_email"
                           formControlName="email"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_phoneNumber">Phone Number</label>
                    <input type="text" class="form-control" name="phoneNumber" id="field_phoneNumber"
                           formControlName="phoneNumber"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_hireDate">Hire Date</label>
                    <div class="d-flex">
                        <input id="field_hireDate" type="datetime-local" class="form-control" name="hireDate" formControlName="hireDate" placeholder="YYYY-MM-DD HH:mm"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_salary">Salary</label>
                    <input type="number" class="form-control" name="salary" id="field_salary"
                           formControlName="salary"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_commissionPct">Commission Pct</label>
                    <input type="number" class="form-control" name="commissionPct" id="field_commissionPct"
                           formControlName="commissionPct"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_manager">Manager</label>
                    <select class="form-control" id="field_manager" name="manager" formControlName="managerId">
                        <option [ngValue]="null"></option>
                        <option [ngValue]="employeeOption.id" *ngFor="let employeeOption of employees; trackBy: trackById">{{ employeeOption.id }}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_department">Department</label>
                    <select class="form-control" id="field_department" name="department" formControlName="departmentId">
                        <option [ngValue]="null"></option>
                        <option [ngValue]="departmentOption.id" *ngFor="let departmentOption of departments; trackBy: trackById">{{ departmentOption.id }}</option>
                    </select>
                </div>
            </div>

            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary" (click)="previousState()">
                    <fa-icon icon="ban"></fa-icon>&nbsp;<span>Cancel</span>
                </button>

                <button type="submit" id="save-entity" [disabled]="editForm.invalid || isSaving" class="btn btn-primary">
                    <fa-icon icon="save"></fa-icon>&nbsp;<span>Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
